<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    用户名:<input id="username"><span id="username_span">请输入由数字字母_$组成的长度6到10位不能以数字开头</span><br>
    密码:<input id="userpwd1"><span id='span1'></span><br>
    确认:<input id="userpwd2"><span id="userpwd_span">请输入长度6到12位的数字和字母组成</span><br>
    电话:<input id="usertel"><span id="usertel_span">请输入常用的手机号</span><br />
    邮箱:<input id="useremail"><span id="useremail_span">请输入常见的邮箱</span><br>
    昵称:<input id="nickname"><span id="nickname_span">2到4位的汉字</span><br>
    <button id="btn">注册</button>


</body>
<script>

    var ousername = document.querySelector('#username')
    var ousernamespan = document.querySelector('#username_span')

    var ouserpwd1 = document.querySelector('#userpwd1')
    var ospan = document.querySelector('#span1')

    var ouserpwd2 = document.querySelector('#userpwd2')
    var ouserpwdspan = document.querySelector('#userpwd_span')

    var ousertel = document.querySelector('#usertel')
    var ousertelspan = document.querySelector('#usertel_span')

    var ouseremail = document.querySelector('#useremail')
    var ouseremailspan = document.querySelector('#useremail_span')

    var onickname = document.querySelector('#nickname')
    var onicknamespan = document.querySelector('#nickname_span')

   
    var obtn = document.querySelector('#btn')
  


    obtn.onclick = function () {
        var username = ousername.value
        var userpwd1 = ouserpwd1.value
        var userpwd2 = ouserpwd2.value
        var usertel = ousertel.value
        var useremail = ouseremail.value
        var nickname = onickname.value

        ousernamespan.innerHTML = yonghu(username)
        ospan.innerHTML = mima(userpwd1)
        ouserpwdspan.innerHTML = remima()
        ousertelspan.innerHTML = phonenum(usertel)
        ouseremailspan.innerHTML = email(useremail)
        onicknamespan.innerHTML = nickname1(nickname)
    }
    //请输入由数字字母_$组成的长度6到10位不能以数字开头
    function yonghu(str) {
        var reg = /^[0-9a-zA-Z_$][0-9a-zA-Z_$]{5,9}$/
        var result = reg.test(str)
        if (result == false) {
            ousernamespan.style.color = 'red'
            return '请输入正确用户名'
        }
        ousernamespan.style.color = 'green'
        return '√'
    }
    
    //请输入长度6到12位的数字和字母组成
    function mima(mima) {
        var reg = /^[0-9a-zA-Z][0-9a-zA-Z]{5,11}$/
        var result = reg.test(mima)
        if (result == false) {
            ospan.style.color = 'red'
            return '请输入正确的密码'
        }
        ospan.style.color = 'green'
        return '√'
    }
    function remima() {
        if (ouserpwd2.value == ouserpwd1.value) {
            ouserpwdspan.style.color = 'green'
            return '√'
        }
        ouserpwdspan.style.color = 'red'
        return '请输入相同的密码'

    }
    function phonenum(num) {
        var reg = /^1[0-9]{10}$/
        var resule = reg.test(num)
        if (resule == false) {
            ousertelspan.style.color = 'red'
            return '请输入正确的电话'
        }
        ousertelspan.style.color = 'green'
        return '√'
    }

    function email(useremail) {
        var reg = /^\w+@\w+(\.\w+)+$/
        var result = reg.test(useremail)
        if (result == false) {
            ouseremailspan.style.color = 'red'
            return '请输入正确的邮箱'
        }
        ouseremailspan.style.color = 'green'
        return '√'
    }
    function nickname1(nickname) {
        var reg = /^[\u4e00-\u9fa5]{2,4}$/
        var result = reg.test(nickname)
        if (result == false) {
            onicknamespan.style.color = 'red'
            onicknamespan.innerHTML= '请输入正确的昵称'
        }
        onicknamespan.style.color = 'green'
        return '√'
    }







</script>

</html>